// 注入css
let head = document.getElementsByTagName('head')[0];
let link = document.createElement('link');
link.href = './dialog.css';
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);

/**
 * DoAgree用户需知组件
 * @param {*} options 
 *              - domId 绑定的domId
 *              - borderColor CheckBox的边框颜色
 *              - iconColor CheckBox的边框颜色
 *              - fontColor 勾选代表同意字体颜色
 *              - contractColor 用户需知字体颜色
 *              - onCheckboxClick CheckBox点击回调事件
 * @template
 * 有色背景
 *  borderColor: '#fff'
 *  iconColor: '#fff'
 *  fontColor: '#fff'
 *  contractColor: '#ffa828'
 */
let CtoDialog = function(options) {
    const vm = this;

    vm.id = options.id || 'ctoDialog';
    vm.visible = options.visible || false;
    vm.width = options.width || '30%';
    vm.top = options.top || '15vh';
    vm.title = options.title;
    vm.content = options.content;
    vm.showClose = options.showClose === false ? false : true;
    vm.beforeClose = options.beforeClose;
    vm.showBtn = options.showBtn || false;
    vm.btnCallback = options.btnCallback;
    vm.btnOkText = options.btnOkText;
    vm.btnCancelText = options.btnCancelText;

    vm.dialogWrap = null;
    vm.dialog = null;
}

/**
 * Dialog的原型方法
 */
CtoDialog.prototype = {
    initContent() {
        const vm = this;

        // esc关闭
        document.addEventListener('keydown',function (e) {
            if (e.code == 'Escape' || e.which == 27) {
                vm.hide();
                vm.beforeClose && vm.beforeClose('esc');
            }
        },false);

        // model遮罩点击关闭
        vm.dialogWrap.onclick = function () {
            vm.hide();
            vm.beforeClose && vm.beforeClose('model');
        }

        // 初始化样式，先置空原有内容
        vm.innerHTML = '';
        vm.dialog.style.width = vm.width;
        vm.dialog.style.marginTop = vm.top;

        // 关闭按钮
        if (vm.showClose) {
            let close = '<img alt="close" src="./icon-close.png" class="btn-close"></img>';
            vm.dialog.innerHTML = close;

            // 关闭按钮点击关闭
            close.onclick = function () {
                debugger
                vm.hide();
                vm.beforeClose && vm.beforeClose('close');
            }
        }

        // 头部
        if (vm.title) {
            let headerEle = document.createElement('div');
            vm.dialog.appendChild(headerEle);

            headerEle.classList.add('cto-dialog-header');
            if (vm.title instanceof Element) {
                // 传入的是dom
                headerEle.appendChild(vm.title);
            } else {
                // 字符串形式，可以是html字符串
                headerEle.innerHTML = vm.title;
            }
        }

        // 主体
        if (vm.content) {
            let contentEle = document.createElement('div');
            contentEle.classList.add('cto-dialog-body');
            vm.dialog.appendChild(contentEle);

            if (vm.content instanceof Element) {
                // 传入的是dom
                contentEle.appendChild(vm.content);
            } else {
                // 字符串形式，可以是html字符串
                contentEle.innerHTML = vm.content;
            }
        }

        // 底部
        if (vm.showBtn) {
            let footerEle = document.createElement('div');
            vm.dialog.appendChild(footerEle);
            footerEle.classList.add('cto-dialog-footer');

            let btnCancel = document.createElement('button');
            btnCancel.classList.add('cto-btn');
            btnCancel.classList.add('btn-cancel');
            btnCancel.innerText = vm.btnCancelText || '取消';
            footerEle.appendChild(btnCancel);
            btnCancel.onclick = function (e) {
                vm.btnCallback && vm.btnCallback('cancel');
                e.stopPropagation();
            }

            let btnOk = document.createElement('button');
            btnOk.classList.add('cto-btn');
            btnOk.classList.add('btn-ok');
            btnOk.innerText = vm.btnOkText || '确定';
            footerEle.appendChild(btnOk);
            btnOk.onclick = function (e) {
                vm.btnCallback && vm.btnCallback('ok');
                e.stopPropagation();
            }
        }
    },

    show() {
        const vm = this;

        vm.visible = true;
        let bodyEle = document.body;
        vm.dialogWrap = document.querySelector('.cto-dialog-wrap');
        vm.dialog = document.querySelector('.cto-dialog');

        if (vm.dialogWrap) {
            if (vm.id === vm.dialogWrap.id) {
                // 同一dialog，复用直接显示dialog
                vm.dialogWrap.style.visibility = 'visible';
                return;
            }

            // 清除现有dialog
            bodyEle.removeChild(vm.dialogWrap);
        } 

        // 不存在，创建dialog容器并初始化内容
        vm.dialogWrap = document.createElement('div');
        vm.dialogWrap.id = vm.id;
        vm.dialogWrap.classList.add('cto-dialog-wrap');
        bodyEle.appendChild(vm.dialogWrap);

        // dialog主体
        vm.dialog = document.createElement('div');
        vm.dialog.classList.add('cto-dialog');
        vm.dialogWrap.appendChild(vm.dialog);

        vm.initContent();
        // 显示dialog
        vm.dialogWrap.style.visibility = 'visible';
    },

    hide() {
        const vm = this;

        vm.visible = false;
        // 隐藏dialog
        vm.dialogWrap.style.visibility = 'hidden';
    }
}

/**
 * 获取指定id的dom对象
 * @param {String} id 
 * @returns 指定id的dom对象
 */
 function $id(id) {
    return id ? document.getElementById(id) : null;
};

/**
 * 在目标元素后插入新元素
 * @param {Element} newElement 要插入的新元素
 * @param {Element} targetElement 目标元素
 */
function insertAfter(newElement, targetElement) {
    let parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}